<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a th:href="@{/addBook}">添加新书</a>
<table border="1px" style="margin: auto">
    <form th:action="@{/del}" method="post" onsubmit="return validateForm()">
        <tr style="border: none">
            <td><input type="submit" value="删除" onsubmit="return validateForm()"></td>
        </tr>
        <tr>
            <th>选择</th>
            <th>编号</th>
            <th>书名</th>
            <th>价格</th>
            <th>类目</th>
            <th>库存</th>
            <th>图片</th>
            <th>说明</th>
            <th>作者</th>
            <th>已售</th>
        </tr>
        <tr th:each="b:${page.list}">
            <td><input type="checkbox" th:value="${b.id}" name="ids"></td>
            <td th:text="${b.id}"></td>
            <td th:text="${b.name}"></td>
            <td th:text="${b.price}"></td>
            <td th:text="${b.category}"></td>
            <td th:text="${b.pnum}"></td>
            <td th:text="${b.imgurl}"></td>
            <td th:text="${b.description}"></td>
            <td th:text="${b.author}"></td>
            <td th:text="${b.sales}"></td>
        </tr>
    </form>
    <tr style="text-align: center">
        <td colspan="9">
            总的页数：<span th:text="${page.pages}"></span>
            总的记录数：<span th:text="${page.total}"></span>
            当前页数：<span th:text="${page.pageNum}"></span>
        </td>
    </tr>

    <tr style="text-align: center">
        <td colspan="9">
           <span th:if="${page.hasPreviousPage}">
            <a th:href="@{/getPage(pageNum=${page.pageNum -1})}">上一页</a>
            </span>
            <span th:each="p:${#numbers.sequence(1,page.pages)}">
            <a th:href="@{/getPage(pageNum=${p})}" th:text="${p}"></a>
            </span>

            <span th:if="${page.hasNextPage}">
              <a th:href="@{/getPage(pageNum=${page.pageNum+1})}">下一页</a>
            </span>
        </td>
    </tr>
</table>
<script src="/js/jquery.js"></script>
<script>
    function validateForm() {
        console.log($("input[name='ids']:checked"))
        if ($("input[name='ids']:checked").length == 0) {
            alert("必须选一个删除！")
            return false;
        }
        if (confirm("确定要删除吗？")) {

        } else {
            alert("已取消删除")
            return false;
        }
    }
</script>
</body>
</html>